<!--
 * @Description: 导出
 * @Author: wind-lc
 * @version: 1.0
 * @Date: 2022-12-19 17:54:56
 * @LastEditTime: 2023-05-30 18:04:29
 * @FilePath: \cscec-pms-admin\src\views\construction\constructionSchedule\components\PlanExport.vue
-->
<template>
  <a-modal
      title="导出"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
      class="plan-export"
    >
    <a-form-model :model="form"  
      :label-col="{ lg: { span: 10 }, sm: { span: 10 } }"
      :wrapper-col="{ lg: { span: 14 }, sm: { span: 14 } }">
      <a-form-model-item label="请选择导出文件格式">
        <a-radio-group v-model="form.type" @change="changeVal">
          <a-radio :value="item" v-for="item in typeList" :key="item">
            {{ firstToUpper(item) }}
          </a-radio>
        </a-radio-group>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>
<script>
export default {
  name: 'PlanExport',
  props: {
    // 隐藏显示
    visible: {
      type: Boolean,
      default: false
    },
    // 导出了列表
    typeList: {
      type: Array,
      default: () => ['project', 'excel']
    },
    // 下载接口函数
    downloadFun: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      // 确定loading
      confirmLoading: false,
      // 表单
      form: {
        type: this.typeList[0]
      }
    }
  },
  watch:{
    visible:{
      handler(val){
        if(val){
          this.form.type = this.typeList[0]
        }
      }
    }
  },
  methods:{
    firstToUpper(str) {
      return str.trim().toLowerCase().replace(str[0], str[0].toUpperCase())
    },
    changeVal(val){
      this.form.type = val.target.value
      this.$forceUpdate();
    },
    /**
     * @description: 确认导出
     * @return {void}
     */    
    async handleOk(){
      try {
        this.confirmLoading = true
        this.handleDownload(await this.downloadFun[this.form.type]())
        this.handleCancel()
      } catch (error) {
        console.log(error)
      } finally{
        this.confirmLoading = false
      }
    },
    /**
     * @description: 下载
     * @return {void}
     */    
    handleDownload(res){
      const blob = new Blob([res.data])
      const filename = decodeURIComponent(res.headers['content-disposition'].split('filename=')[1])
      const downloadElement = document.createElement('a')
      const href = window.URL.createObjectURL(blob) // 创建下载的链接
      downloadElement.href = href
      downloadElement.download = filename // 获取文件名
      document.body.appendChild(downloadElement)
      downloadElement.click() //点击下载
      document.body.removeChild(downloadElement) //下载完成移除元素
      window.URL.revokeObjectURL(href) //释放blob对象
    },
    /**
     * @description: 
     * @return {void}
     */    
    handleCancel(){
      this.form = {}
      this.$emit('update:visible', false)
    }
  },
}
</script>
<style lang="less" scoped>
@deep: ~'>>>';
.plan-export @{deep}{
  .ant-form-item .ant-form-item-label{
    width: 41.66666667%;
  }
  .ant-form-item .ant-form-item-control-wrapper{
    width: 58.33333333%;
  }
}
</style>
